
// ### React DEMO: useCallback
// - ButtonWithMemo 使用 React.memo 浅比较 props
// - handleClick 使用 useCallback 缓存, 只有 count 变化时才会重新创建
// - 当 text 变化时, handleClick不会创建新的实例.
// ```jsx
import React from "react";
import { useState, useCallback } from "react";

const ButtonWithMemo = React.memo(({ onClick, label }: { onClick: () => void, label: string }) => {
    console.log('ButtonWithMemo 渲染');
    return <button onClick={onClick}>{label}</button>;
});

const UseCallbackDemo = () => {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');

    // 使用 useCallback 缓存函数
    const handleClick = useCallback(() => {
        setCount(count + 1);
    }, [count]); // 只有 count 变化时才重新创建函数

    // 这部分代码如果被使用在 return 部分,  当 text 改变时 那么ButtonWithMemo 每次也会被渲染
    // 因为 handleClickWithout 没有 useCallback导致, 当text变化的时候, 这个函数每次都会被重新创建
    // 因为 handleClick事件也是被当作参数传进去了, 而 子组件是一个被 memo修饰的组件,会进行浅比较
    // const handleClickWithout = () => {
    //     console.log("🚀 ~ handleClickWithout ~ handleClickWithout:")
    //     setCount(count + 1);
    // }

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} />
            <ButtonWithMemo onClick={handleClick} label="增加计数 1" />
           {/* <ButtonWithMemo onClick={handleClickWithout} label="增加计数 2" /> */}
            <p>计数: {count}</p>
        </div>
    );
}

export default UseCallbackDemo
// ```
// - 注意看注释掉的代码
// - 这部分代码如果被使用在 return 部分,  当 text 改变时 那么ButtonWithMemo 每次也会被渲染
// - 因为 handleClickWithout 没有 useCallback导致, 当text变化的时候, 这个函数每次都会被重新创建
// -  因为 handleClick事件也是被当作参数传进去了, 而 子组件是一个被 memo修饰的组件,会进行浅比较
// ```js
//  const handleClickWithout = () => {
//      setCount(count + 1);
//  }
// ```

// ### SO
// - 当父组件的方法被当作参数传递给子组件时候非常有用
// - 同时满足 子组件 React.memo